<template>
  <div class="flight_item_wrap">
    <div class="flight_item_main" @click="show = !show">
      <span class="duration">{{ duration }}</span>
      <div class="flight_item_main_col1">
        <span>{{ flights.airline_name }} {{ flights.flight_no }} {{flights.plane_size}}</span>
      </div>
      <div class="flight_item_main_col2">
        <div class="flight_item_main_col2_time">{{ flights.dep_time }}</div>
        <div class="flight_item_main_col2_airport">
          {{ flights.org_airport_name }} {{ flights.org_airport_quay }}
        </div>
      </div>
      <div class="flight_item_main_col2">
        <div class="flight_item_main_col2_time">{{ flights.arr_time }}</div>
        <div class="flight_item_main_col2_airport">
          {{ flights.dst_airport_name }} {{ flights.dst_airport_quay }}
        </div>
      </div>
      <div class="flight_item_main_col3">
        ￥<span>{{ flights.base_price }}</span
        >起
      </div>
    </div>
    <!-- 购票 -->
    <div class="flight_item_list" v-show="show">
      <span class="recommend">低价推荐</span>
      <div class="flight_group" v-for="(item,index) in flights.seat_infos" :key="index">
        <div class="flight_item_seat">
          <span>{{item.name}}</span> | {{item.supplierName}}
        </div>
        <div class="flight_item_price">￥{{item.par_price}}</div>
        <div class="flight_item_select">
          <el-button class="flight_item_btn" @click="submitAirOrder(flights.id,item.seat_xid)">选定</el-button>
          <div>剩余:{{item.discount}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["flights"],
  data() {
    return {
      show: false,
    };
  },
  // 计算属性
  computed: {
    duration() {
      // 起飞的时间戳
      const depTime = +new Date(this.flights.dep_datetime);
      // 到达的时间戳
      const arrTime = +new Date(this.flights.arr_datetime);
      // 两个时间的 时长 毫秒
      const dua_time = arrTime - depTime;
      // 先转为小时 3.2345345 h
      const hour = parseInt(dua_time / 1000 / 60 / 60);
      // 再分钟
      const minute = parseInt(dua_time / 1000 / 60 - hour * 60);
      return `${hour}小时${minute}分`;
    },
  },
  methods:{
    // 点击 座位 选定摁钮 事件
    submitAirOrder(id,seat_xid){
      // id 机票id seat_xid座位号id
      this.$router.push({path:"/air/order",query:{id,seat_xid}})

    }
  }
};
</script>

<style lang="less" scoped>
.flight_item_wrap {
  border: 1px solid #999;
  margin: 10px 0;
  .flight_item_main {
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    background-color: #fff;
    position: relative;
    .duration {
      position: absolute;
      top: 10px;
      left: 328px;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }
    .flight_item_main_col1 {
      span {
        font-weight: 600;
      }
    }
  }

  .flight_item_main_col2 {
    text-align: center;
    .flight_item_main_col2_time {
      font-size: 22px;
      font-weight: 600;
    }
    .flight_item_main_col2_airport {
      margin-top: 5px;
      font-size: 12px;
      color: #b8b4c4;
    }
  }
  .flight_item_main_col3 {
    span {
      color: orange;
      font-size: 28px;
      font-weight: 600;
    }
  }

  .flight_item_list {
    background-color: #f6f6f6;
    padding-left: 135px;
    position: relative;
    .recommend {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      font-size: 14px;
    }

    .flight_group {
      height: 75px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      &:last-child {
        border-bottom: none;
      }
      .flight_item_seat {
        font-size: 12px;
        width: 395px;
        span {
          color: green;
        }
      }

      .flight_item_price {
        color: orange;
        font-size: 20px;
        width: 100px;
      }

      .flight_item_select {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        .flight_item_btn {
          width: 75px;
          height: 30px;
          background-color: orange;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        div {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
</style>